<template>
	<contents :heightInclude="['tabBar']">
		<view>
			<u-cell-group>
				<u-cell-item
					title="会员卡"
					@click="cardbagClick('/pages/user/cardbag/cardList')"
				>
					<u-icon
						slot="icon"
						size="44"
						class="u-padding-right-20"
						name="http://img.druglots.cn/image/member_card.png"
					></u-icon>
				</u-cell-item>
				<u-cell-item
					title="积分商场"
					@click="cardbagClick('/pages/user/cardbag/point')"
				>
					<u-icon
						slot="icon"
						size="44"
						class="u-padding-right-20"
						name="http://img.druglots.cn/image/point.png"
					></u-icon>
				</u-cell-item>
			</u-cell-group>
		</view>
		<view>
			<u-empty
				v-if="this.cardList.length === 0"
				text="最近三十天未使用卡片"
				class="u-margin-top-80"
				icon-size="44"
				src="http://img.druglots.cn/image/card_icon.png"
			></u-empty>
			<view v-if="this.cardList.length > 0">
				<view class="card-list__tips u-font-24 u-margin-top-38 u-padding-left-20">
					最近使用
				</view>
				<cardItem class="u-margin-top-18" :cardList="cardList" />
			</view>
		</view>
	</contents>
</template>

<script>
import cardItem from './cardItem.vue'
import { getLastestUsedMemberCards } from '@/api/http/cardbag.js'
export default {
	components: {
		cardItem
	},
	data() {
		return {
			cardList: []
		}
	},
	created() {
		this.getLastestUsedMemberCards()
	},
	methods: {
		// 获取最近是否使用的会员卡
		async getLastestUsedMemberCards() {
			const res = await getLastestUsedMemberCards()
			if (res.code === 200) {
				if (res.data) {
					this.cardList = res.data
				} else {
					this.cardList = []
				}
			} else {
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
			}
		},

		// 进入会员卡页面
		cardbagClick(url) {
			uni.navigateTo({
				url
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.card-list__tips {
	color: #999999;
}
</style>
